<f:layout name="DocHeader" />
<f:section name="Content">
    <f:flashMessages />
    <f:if condition="{url}">
        <div class="viewpage-item">
            <div class="viewpage-topbar t3js-viewpage-topbar">
                <div class="viewpage-topbar-orientation t3js-viewpage-topbar-orientation">
                    <a href="#" class="t3js-change-orientation">
                        {icons.orientation -> f:format.raw()}
                    </a>
                </div>
                <div class="viewpage-topbar-preset">
                <span class="dropdown">
                    <button class="dropdown-toggle" type="button" id="viewpage-topbar-preset-button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <span class="t3js-viewpage-current-label">
                            {current.label}
                        </span>
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="viewpage-topbar-preset-button">
                        <li role="separator" class="divider"></li>
                        <li>
                            <a href="#" class="t3js-preset-maximized t3js-change-preset" data-key="maximized" data-label="{f:translate(key: 'maximized')}" data-width data-height>
                                <span class="viewpage-preset-item">
                                    <span class="viewpage-preset-item-icon">{icons.fullscreen -> f:format.raw()}</span>
                                    <span class="viewpage-preset-item-label">
                                        {f:translate(key: 'maximized')}
                                    </span>
                                    <span class="viewpage-preset-item-size">
                                        100%/100%
                                    </span>
                                </span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="t3js-preset-custom t3js-change-preset" data-key="custom" data-label="{f:translate(key: 'custom')}" data-width="{custom.width}" data-height="{custom.height}">
                                <span class="viewpage-preset-item">
                                    <span class="viewpage-preset-item-icon">{icons.expand -> f:format.raw()}</span>
                                    <span class="viewpage-preset-item-label t3js-preset-custom-label">
                                        {f:translate(key: 'custom')}
                                    </span>
                                    <span class="viewpage-preset-item-size">
                                        <span class="t3js-preset-custom-width">{custom.width}</span>px/<span class="t3js-preset-custom-height">{custom.height}</span>px
                                    </span>
                                </span>
                            </a>
                        </li>

                        <f:for each="{presetGroups}" as="presetGroup" iteration="presetGroupIteration">
                            <f:if condition="{presetGroup}">
                                <li role="separator" class="divider"></li>
                                <f:for each="{presetGroup}" as="preset">
                                    <li>
                                        <a href="#" class="t3js-change-preset" data-key="{preset.key}" data-label="{preset.label}" data-width="{preset.width}" data-height="{preset.height}">
                                            <span class="viewpage-preset-item">
                                                <span class="viewpage-preset-item-icon">{icons.{preset.type} -> f:format.raw()}</span>
                                                <span class="viewpage-preset-item-label">{preset.label}</span>
                                                <span class="viewpage-preset-item-size">
                                                    {f:if(condition: preset.width, then: '{preset.width}px', else: '100%')}/{f:if(condition: preset.height, then: '{preset.height}px', else: '100%')}
                                                </span>
                                            </span>
                                        </a>
                                    </li>
                                </f:for>
                            </f:if>
                        </f:for>
                    </ul>
                </span>
                </div>
                <div class="viewpage-topbar-size">
                    <input class="t3js-viewpage-input-width" type="number" name="width" min="300" max="9999" value="{current.width}">
                    x
                    <input class="t3js-viewpage-input-height" type="number" name="height" min="300" max="9999" value="{current.height}">
                </div>
            </div>
            <div class="viewpage-resizeable t3js-viewpage-resizeable" style="width:{current.width}px;height:{current.height}px;">
                <iframe src="{url}" width="100%" height="100%" id="tx_viewpage_iframe" frameborder="0" border="0"></iframe>
            </div>
        </div>
    </f:if>
</f:section>
